<!DOCTYPE html>
<html>
	<head>
    	<title>Tiger-dad</title>
    	
    	<meta charset="utf-8">
    	
    	<!-- Hide UI elements such as URL bar and bottom bar when iOS is on homescreen.-->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- Set the iOS status bar color to black. -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- Set viewport properties -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        
        <!-- Main storybook style -->
        <link media="screen, projection" rel="stylesheet" type="text/css" href="../engine/css/engine.css">
        <!-- Optional custom css -->
        <link media="screen, projection" rel="stylesheet" type="text/css" href="css/custom.css">
        <!-- Custom fonts -->
        <link href="fonts/fonts.css" rel="stylesheet" type="text/css">
    </head>
 
    <body>
    
	    <!--The following markup is used to test the storybook inside a parent container-->
	    <!--<div style="background-color: #bada55; padding: 20px 20px 100px 20px; height: 100%;">
	    	<header style="padding-bottom: 20px;">Storybook Container in Dashed Line</header>
		    <div style="background-color: #ffffff; border: 2px dashed #ff3333; height: 60%;">-->

	    <!-- Storybook elements will be injected here -->
        <div id="pbsStorybookContainer"></div>
        
		   <!-- </div>
	    </div>-->
    
        <!-- Load storybook engine js files -->
        <script src="../engine/js/pbs.js"></script>
        <script src="../engine/js/eventDispatcher.js"></script>
        <script src="../engine/js/interaction.js"></script>
        <script src="../engine/js/resourceLoader.js"></script>
	    <script src="../engine/js/book.js"></script>
	    <script src="../engine/js/page.js"></script>
	    <script src="../engine/js/textArea.js"></script>
	    <script src="../engine/js/view.js"></script>
        <script src="../engine/js/sprite.js"></script>
        <script src="../engine/js/cycler.js"></script>
        <script src="../engine/js/drawingPad.js"></script>
        <script src="../engine/js/audioPlayer.js"></script>
        <script src="../engine/js/sound.js"></script>
        <script src="../engine/js/audible.js"></script>
        
        <!-- Load plugin js files-->
        <script src="../engine/plug/williammalone/html5-canvas-drawing-canvas.js"></script>
	    
        <!-- Load Implementation js files-->
	    <script src="config/config-book.js"></script>
        <script src="config/config-page-01.js"></script>
	    
	    <script>
			(function (GLOBAL, PBS) {
			
				// Create the storybook
				var book = PBS.KIDS.storybook.book(GLOBAL, PBS, GLOBAL.document.getElementById("pbsStorybookContainer"), PBS.KIDS.storybook.config);	
				// Load the storybook resources
				book.load();
				
				// Example of how to listen for book's layout changes ("SINGLE-PAGE" or "TWO-PAGE")
				book.addEventListener("LAYOUT_CHANGE", function (layoutType) {
					console.log("Layout Change Event Dispatched: " + layoutType);
				});
			
			} (window, PBS));
	    </script>

    </body>
</html>